<template>
  <div>
      <basic-dialog :visible="show"
               minWidth="600px"
               title="消息接收设置"
               :isShowClose="false"
               :isFullScreen="false"
               :isShowBasicFooter="true"
               @close="$emit('close')"
               :loading="isSubmitting"
               @submit="submit">
        <q-card-section style="height:400px; overflow:auto" class="scrollbar">
          <div class="factory">
            <div class="factory-header font-18">{{userInfo.company_name}}</div>
            <div class="factory-content q-mt-md flex">
                <div
                class="factory-content-item q-mr-md font-14 q-mb-md cursor-pointer text-center text-ellipsis q-pl-sm q-pr-sm"
                v-for="v in workShopIds"
                @click="onCheckBtn(v)"
                :class="v.isCheck ? 'blueDiv' : 'greyDiv'"
                :key="v.value">
                {{v.label}}
                <q-tooltip>{{v.label}}</q-tooltip>
              </div>
            </div>
          </div>
        </q-card-section>
        <q-inner-loading :showing="visible">
            <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </basic-dialog>
  </div>
</template>
<script>
import _ from 'lodash'
import MESLIST from 'src/boot/factory/mes-list.js'
import { mapGetters } from 'vuex'
// import { defaultSchemesClearer } from '../../../../assets/js/util'
const { getWorkshopList, putWorkshopBind, getSelectedList } = MESLIST
export default {
  name: 'msg-work-shop-dialog',
  components: {
  },
  props: {
    show: Boolean
  },
  data () {
    return {
      isSubmitting: false,
      visible: true,
      workShopIds: [], // 获取的车间ID
      workSelectedShopList: []
    }
  },
  computed: {
    ...mapGetters({
      'userInfo': 'userInfo'
    })
  },
  mounted () {
  },
  watch: {
    show (val) {
      if (val) {
        // 有车间分厂 数据
        this.getSelectedList()
      }
    }
  },
  methods: {
    /**
     * workShop 车间
     * factoryItem 分厂
     */
    onCheckBtn (val) {
      console.log(val)
      val.isCheck = !val.isCheck
      let checkAll = this.workShopIds.filter(v => v.value !== 'all')
      let checkItem = this.workShopIds.filter(v => v.value === 'all')
      // 选择全部
      if (val.value === 'all') {
        checkAll.map(item => { item.isCheck = false })
      } else {
        // 选择单个的效果
        checkItem.map(item => { item.isCheck = false })
        if (this.workShopIds.filter(i => i.isCheck).length === this.workShopIds.length - 1) {
          checkAll.map(item => { item.isCheck = false })
          checkItem.map(item => { item.isCheck = true })
        }
      }
    },
    submit () {
      let member
      if (this.workShopIds[0].value === 'all' && this.workShopIds[0].isCheck) {
        member = _.map(_.tail(this.workShopIds), 'value')
      } else {
        member = _.map(_.filter(this.workShopIds, 'isCheck'), 'value')
      }
      if (_.isEmpty(member)) {
        this.$message.warning('请选择车间')
        return
      }
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          是否保存此次操作?</p>`,
        html: true,
        message: '确认后取消选择车间的历史消息将会清除!',
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(() => {
        this.putWorkshopBind(member)
      })
    },
    // 绑定车间操作
    putWorkshopBind (workShopIds) {
      this.isSubmitting = true
      this.visible = true
      putWorkshopBind(this.userInfo.user_id, { workShopIds }).then((res) => {
        this.isSubmitting = false
        this.visible = false
        this.$emit('submit')
      }).catch((err) => {
        this.isSubmitting = false
        this.visible = false
        this.$emit('submit')
        console.log(err)
      })
    },
    getSelectedList () {
      const userId = this.userInfo.user_id
      this.visible = true
      getSelectedList(userId).then(res => {
        const ret = res.data
        this.workSelectedShopList = ret.map(v => v.workShopId)
        this.getWorkshopList()
      })
    },
    // 获取设置车间ID
    getWorkshopList () {
      getWorkshopList().then((result) => {
        const isAll = result.data.length === this.workSelectedShopList.length
        const ret = result.data.map(v => {
          const item = v
          item.isCheck = this.workSelectedShopList.includes(item.value) && !isAll
          return v
        })
        this.workShopIds = [ { label: '全部', value: 'all', isCheck: _.isEmpty(this.workSelectedShopList) || isAll }, ...ret ]
        this.visible = false
      }).catch((err) => {
        this.workShopIds = []
        this.visible = false
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .factory{
    .factory-content{
      .factory-content-item{
        width: 124px;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;
      }
    }
  }
  .blueDiv{
    border: 1px solid #5F77FD;
    color: #5F77FD;
  }
  .greyDiv{
    border: 1px dashed #999999;
    color: #333333;;
  }
</style>
